<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>


<style>
    .container {
        width: 360px;
        height: 277px;
        margin: 100px auto;
    }

    .tab {
        display: flex;
    }

    .button {
        height: 35px;
        width: 58px;
       


    }

    .button.active {
        height: 33px;
   
    background-color: #fff;
  




    }

    .tab-content {
        width: 360px;
        height: 241px;
        position: relative;
    }

    .tab-content-item {

        width: 100%;
        height: 100%;
        line-height: 241px;
        text-align: center;

        position: absolute;
        left: 0;
        top: 0;
        display: none;
    }

    .tab-content-item.active {
        display: block;

    }
</style>

<body>

    <div class="container">

        <div class="tab">
            <button class="button active"> 选项卡1</button>
            <button class="button  "> 选项卡2</button>
            <button class="button  "> 选项卡3</button>

        </div>


        <div class="tab-content">
            <div class="tab-content-item active" style="background-color: aliceblue;">
                <p>选项卡1的内容</p>
            </div>
            <div class="tab-content-item" style="background-color: aqua;">
                <p>选项卡2的内容</p>
            </div>
            <div class="tab-content-item" style="background-color: azure;">
                <p>选项卡3的内容</p>
            </div>



        </div>







    </div>






    <script>

        var btn = document.querySelectorAll("button");
        var content = document.querySelectorAll(".tab-content-item");


        for (var i = 0; i < btn.length; i++) {
            btn[i].addEventListener("mouseover", change)
        }

        function change() {
            clearActive();
    
            this.classList.add("active");
          


            var index = getIndex(btn, this);
            hideContent();

            content[index].style.display = "block";




        }

        function clearActive() {
            for (var i = 0; i < btn.length; i++) {
                btn[i].classList.remove("active");

            }


        }

        function getIndex(arr, data) {
            for (var i = 0; i < arr.length; i++) {
                if (arr[i] == data) {
                    return i;
                }
            }
            reurn - 1;


        }

        function hideContent() {
            for (var i = 0; i < content.length; i++) {
                content[i].style.display = "none";
            }
        }










    </script>

</body>

</html>